<template>
	<view>
		<view class="land-info">
			<view class="land-image">
				<image :src="`/img`+landInfo.landImg" class="land-photo" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 基本数据 -->
		<view class="cont">
			<text class="land-price">租赁日期：{{ formatDate(landInfo.createTime) }} 至
				{{ formatDate(landInfo.endTime) }}</text>
			<view class="land-title">{{ landInfo.landName }}</view>
			<view class="land-description">{{ landInfo.tbase.baseDescription }}</view>
			<view class="land-location">
				<text class="location-icon">&#x1F4CD;</text>
				<text>{{ landInfo.tregion.regionAddress }}</text>
			</view>
		</view>
		<!-- 种植东西和植物的状态 -->
		<view class="plant-info">
			<view class="info-title">植物状态</view>
			<view class="info-grid">
				<view v-for="(item, index) in plantItems" :key="index" class="info-item">
					<view class="info-label">{{ item.label }}</view>
					<view class="info-value">{{ item.value }}</view>
				</view>
			</view>
		</view>
		<!-- 地块服务 -->
		<view class="land">
			<view class="land-service-title">
				地块服务
			</view>
			<view class="land-service-cards">
				<view v-for="(service, index) in landServices" :key="index"
					:class="['service-card', selectedService === service.type ? 'active' : '']"
					@click="selectService(service.type)">
					<view class="service-type">{{ service.type }}</view>
					<view class="service-price">{{ service.price }}</view>
					<view class="service-description">{{ service.description }}</view>
				</view>
			</view>
		</view>
		<!-- 实时数据 -->
		<view class="real-time-data">
			<view class="data-title">实时数据</view>
			<view class="data-grid">
				<view v-for="(item, index) in dataItems" :key="index" class="data-item">
					<view class="data-label">{{ item.label }}</view>
					<view class="data-value">{{ item.value }}</view>
				</view>
			</view>
		</view>

		<!-- 操作功能 -->
		<up-tabbar activeColor="#6bc493">
			<!-- 添加选择种植的植物 -->
			<up-tabbar-item text="种植" icon="/static/种植区域.png" @click="handleTabClick()"></up-tabbar-item>
			<up-tabbar-item text="浇水" icon="/static/无人机灌溉.png" @click="watering()"></up-tabbar-item>
			<up-tabbar-item text="施肥" icon="/static/农药喷洒.png" @click="Fertilization()"></up-tabbar-item>
			<up-tabbar-item text="驱虫" icon="/static/虫情测报.png" @click="pestkill()"></up-tabbar-item>
			<up-tabbar-item text="收获" icon="/static/智慧农民.png" @click="harvest()"></up-tabbar-item>
		</up-tabbar>

		<!-- 选择区域弹窗 -->
		<view v-if="showPicker" class="modal-container">
			<view class="modal">
				<view class="modal-body">
					<text>请选择种植：</text>
					<!-- 使用 scroll-view 添加滚动功能 -->
					<scroll-view class="options-container" scroll-y>
						<view v-for="area in areas" :key="area.seedId" class="option-item"
							:class="{ selected: area.seedId === selectedAreaId }" @click="selectArea(area.seedId)">
							<text>{{ area.seedName }}</text>
						</view>
					</scroll-view>
				</view>
				<view class="modal-footer">
					<button @click="confirmSelection">确认</button>
					<button @click="closeModal">取消</button>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-modal v-model:show="showModal" title="修改确认" content="确定要修改服务类型吗？" confirm-text="确定" cancel-text="取消"
			show-cancel-button="true" @confirm="confirmChange" @cancel="cancelChange" />
		<!-- 警告提示 -->
		<up-notify ref="uNotifyRef" :style="{ zIndex: 9999 }"></up-notify>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import {
		mylandyid,
		myservice,
		pest,
		mywatering,
		allseed,
		myplant
	} from '@/common/api.js';
	// 控制弹窗显示状态
	import {
		useUserStore
	} from '@/stores/user.js';
	// pinia中的数据
	const userStore = useUserStore();

	const showPicker = ref(false);

	// 可选区域数据（加入更多植物）
	const areas = ref([{
		seedId: 1,
		seedName: '白菜'
	}]);

	// 当前选中的区域id和name
	const selectedAreaId = ref(null);
	const selectedAreaName = ref('');
	// 收获
	const harvest = () => {
		// 判断是否有植物
		if (landInfo.value.cultivationId === 0) {
			// 使用 show 方法来显示通知
			uNotifyRef.value.show({
				message: '没有植物，请种植！！',
				type: 'error', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			return;
		}
		// 判断是否成熟
		if (plantItems.value[2].value !== "成熟") {
			// 使用 show 方法来显示通知
			uNotifyRef.value.show({
				message: '成熟才能收获别急！！',
				type: 'error', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			return;
		}
		const region = String(landInfo.value.tregion.city) + '仓库';
		// 获取到数据
		const params = {
			landId: landInfo.value.landId,
			regionId: landInfo.value.regionId,
			cultivationId: 0,
			weatherInfo: '收获',
			userId: userStore.userId,
			serviceType: plantItems.value[0].value,
			weather: region,
		}

		myplant(params).then(res => {
			uNotifyRef.value.show({
				message: '收获成功',
				type: 'success', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			// 清空
			landInfo.value.cultivationId = 0;
			plantItems.value = [];
		})

	}
	// 显示弹窗
	function handleTabClick() {
		// 判断是否有植物
		if (landInfo.value.cultivationId !== 0) {
			uNotifyRef.value.show({
				message: '请先收获在种植！！',
				type: 'error', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			return;
		}
		// 打印种植数据
		allseed().then(res => {
			areas.value = res.data;
			showPicker.value = true;
		})
	}

	// 选择区域
	function selectArea(id) {
		selectedAreaId.value = id;
		console.log('当前的 areas.value:', areas.value);
		const selectedArea = areas.value.find(area => area.seedId === id);
		if (selectedArea) {
			selectedAreaName.value = selectedArea.seedName;
		}
	}

	// 关闭弹窗
	function closeModal() {
		showPicker.value = false;
		selectedAreaId.value = null; // 重置选中的区域ID
		selectedAreaName.value = ''; // 重置选中的区域名称
	}

	// 确认选择
	function confirmSelection() {
		if (selectedAreaName.value !== null) {
			// 获取到数据
			const params = {
				landId: landInfo.value.landId,
				cultivationId: selectedAreaId.value,
				weatherInfo: '种植',
				userId: userStore.userId,
				serviceType: selectedAreaName.value,
			}

			myplant(params).then(res => {
				uNotifyRef.value.show({
					message: '种植成功',
					type: 'success', // 提醒类型
					color: '#ffffff', // 字体颜色
					bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
					duration: 3000, // 显示时间（毫秒）
					fontSize: 15, // 字体大小
					top: 50, // 距离顶部的距离，避免被导航栏遮挡
					safeAreaInsetTop: true, // 考虑顶部的安全区域
				});
				// 实时状态
				plantItems.value = [{
						label: '植物名称',
						value: selectedAreaName.value
					},
					{
						label: '植物状态',
						value: '正常生长'
					},
					{
						label: '生长阶段',
						value: '苗期'
					},
					{
						label: '害虫分析',
						value: '无害'
					}
				];
				landInfo.value.cultivationId = 1;
				closeModal(); // 关闭弹窗，并清空选择
			})
		}
	}

	// 定义一个 ref 变量 存放id
	const itemDetail = ref(null);
	const showModal = ref(false); // 控制弹窗的显示状态
	const newService = ref(''); // 临时保存将要选择的服务类型
	// 假设你有一个 uNotify 组件的引用  
	const uNotifyRef = ref(null);

	// 状态假数据
	const landServices = ref([{
			type: '全托管',
			price: '￥3.00/天',
			description: '农场提供包种植包采摘包配送到家服务',
			status: 1
		},
		{
			type: '半托管',
			price: '￥2.00/天',
			description: '提供种植服务，仅包种植，不含配送到家服务',
			status: 2
		},
		{
			type: '自营',
			price: '￥1.00/天',
			description: '仅出租土地，用户自行种植和管理',
			status: 3
		},
	]);
	// 假数据
	const landInfo = ref({
		title: '大棚蔬菜基地',
		description: '测试地块，仅作测试使用，不提供任何实物和服务。',
		location: '重庆市 市辖区 渝南区',
		recordCount: 22,
		image: 'https://example.com/land-image.jpg',
		startDate: new Date('2024-05-06'),
		endDate: new Date('2024-05-20'),
		tregion: {
			regionAddress: ''
		},
		tbase: {
			baseDescription: ''
		}
	});
	// 用户种植假数据
	const plantItems = ref([]);
	//  实时数据假数据
	const dataItems = ref([]);

	// 从后端传入的当前选中的服务类型
	const initialSelectedService = ref(''); // 声明为ref类型

	// 当前选择的服务类型
	const selectedService = ref(initialSelectedService);

	// 选择服务
	const selectService = (type) => {
		if (type === selectedService.value) {
			return;
		}

		newService.value = type; // 存入状态
		showModal.value = true; // 显示确认弹窗
	};

	// 确认修改
	const confirmChange = () => {
		selectedService.value = newService.value; // 确认后更新服务类型
		console.log(newService.value);
		const params = {
			landId: landInfo.value.landId,
			serviceType: newService.value
		}
		console.log(params);
		// 执行修改操作   
		myservice(params).then(res => {
			console.log(res);
			// new修改之后需要清空
			showModal.value = false; // 关闭弹窗
			if (res.code == 200) {
				console.log(状态修改成功);
			}
		})

	};

	// 时间状态
	const formatDate = (date) => {
		if (!date) return ''; // 处理空日期
		const d = new Date(date); // 将日期字符串转换为 Date 对象
		return d.toLocaleDateString('zh-CN'); // 使用中国地区的日期格式（例如：2024年5月6日）
	};
	// 跳转
	const navigateTo = (url) => {
		uni.navigateTo({
			url,
			fail: (err) => {
				console.error('Failed to navigate:', err);
			},
		});
	};
	// 驱虫
	const pestkill = () => {

		// console.log(useUserStore.userId);
		if (plantItems.value[3].value === "无害") {
			uNotifyRef.value.show({
				message: '不需要驱虫',
				type: 'error', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			return;
		}
		// 驱虫
		const params = {
			cultivationId: landInfo.value.tcultivation.cultivationId,
			pet: '无害',
			uid: 1,
			lid: landInfo.value.landId,
		}
		console.log(params);
		// 驱虫
		pest(params).then(res => {
			plantItems.value[3].value = "无害";
			uNotifyRef.value.show({
				message: '驱虫成功',
				type: 'success', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
		})
	}
	// 施肥
	const Fertilization = () => {
		if (plantItems.value[1].value === "正常生长") {
			// 使用 show 方法来显示通知
			uNotifyRef.value.show({
				message: '正常生长不需要施肥',
				type: 'error', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			return;
		}

		// 驱虫
		const params = {
			cultivationId: landInfo.value.tcultivation.cultivationId,
			growp: '正常生长',
			uid: 1,
			lid: landInfo.value.landId,
		}
		console.log(params);
		// 驱虫
		pest(params).then(res => {
			console.log(res);
			plantItems.value[1].value = "正常生长";
			uNotifyRef.value.show({
				message: '施肥成功',
				type: 'success', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
		})
	}

	// 浇水
	const watering = () => {
		const re = dataItems.value[0].value.replace('%', '');
		if (re >= 10) {
			// 使用 show 方法来显示通知
			uNotifyRef.value.show({
				message: '不需要浇水',
				type: 'error', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
			return;
		}
		const wat = Number(re) + 5;
		// 浇水
		const params = {
			water: wat,
			userId: userStore.userId,
			landId: landInfo.value.landId,
		}
		// 浇水
		mywatering(params).then(res => {
			console.log(res);
			dataItems.value[0].value = wat + '%';
			uNotifyRef.value.show({
				message: '浇水成功',
				type: 'success', // 提醒类型
				color: '#ffffff', // 字体颜色
				bgColor: 'linear-gradient(45deg, #ff9800, #f44336)', // 渐变背景色
				duration: 3000, // 显示时间（毫秒）
				fontSize: 15, // 字体大小
				top: 50, // 距离顶部的距离，避免被导航栏遮挡
				safeAreaInsetTop: true, // 考虑顶部的安全区域
			});
		})
	}
	// 挂载
	onMounted(() => {
		// 获取当前页面实例
		const pages = getCurrentPages();
		// 获取上一页id
		const currentPage = pages[pages.length - 1];

		// 获取页面参数
		if (currentPage && currentPage.options) {
			// 查询详细数据
			const params = {
				landId: currentPage.options.id
			}
			mylandyid(params).then(res => {

				landInfo.value = res.data;
				console.log(landInfo);
				// 植物状态
				dataItems.value = [{
						label: '土壤水分',
						value: res.data.water + '%'
					},
					{
						label: '风向',
						value: res.data.weather
					},
					{
						label: '土壤温度',
						value: res.data.temperature + '℃'
					},
					{
						label: '湿度',
						value: res.data.wet + '℃'
					}
				];
				// 实时状态
				plantItems.value = [{
						label: '植物名称',
						value: res.data.tcultivation.plantName
					},
					{
						label: '植物状态',
						value: res.data.tcultivation.growp
					},
					{
						label: '生长阶段',
						value: res.data.tcultivation.plantstatus
					},
					{
						label: '害虫分析',
						value: landInfo.value.tcultivation.pet
					}
				];
				// 服务状态
				initialSelectedService.value = res.data.serviceType;
				console.log(res.data);
			})
		}
		// 可以种植的植物
		allseed().then(res => {
			console.log(res);
		})
	})
</script>

<style scoped>
	.cont {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果，让信息卡片更立体 */
		padding: 16px;
		border-radius: 8px;
		background-color: #ffffff;
		margin-bottom: 16px;
	}

	.land-info {
		padding: 16px;
		border: 1px solid #e6e6e6;
		border-radius: 8px;
		background-color: #ffffff;
		margin-bottom: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果，让卡片更立体 */
	}

	.land-image {
		margin-bottom: 12px;
		/* 适当减少上下间距 */
	}

	.land-photo {
		width: 100%;
		height: 180px;
		/* 降低图片高度，使内容更紧凑 */
		border-radius: 8px;
		object-fit: cover;
	}

	.land-title {
		font-size: 20px;
		/* 增大标题字体 */
		font-weight: bold;
		margin-bottom: 8px;
		color: #333;
		/* 标题颜色改为深色，增强对比度 */
	}

	.land-description {
		font-size: 14px;
		color: #666;
		margin-bottom: 12px;
		/* 增加描述部分的间距 */
		line-height: 1.6;
		/* 增加行间距，提高可读性 */
	}

	.land-location {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #999;
		margin-bottom: 12px;
	}

	.location-icon {
		margin-right: 6px;
		/* 增大图标和文本的间距 */
		font-size: 16px;
		/* 增大图标大小 */
	}

	.record-count {
		font-size: 14px;
		color: #999;
	}

	.land-price {
		font-size: 16px;
		font-weight: bold;
		color: #e60000;
		/* 改为红色，更加醒目 */
		margin-bottom: 8px;
		/* 增加价格和其它内容的间距 */
	}

	.share-button {
		background-color: #f5f5f5;
		border: 1px solid #e6e6e6;
		padding: 6px 12px;
		border-radius: 4px;
		cursor: pointer;
		color: #333;
		font-size: 14px;
		transition: background-color 0.3s;
		/* 增加过渡效果 */
	}

	.share-button:hover {
		background-color: #e0e0e0;
		/* 悬停时改变背景色 */
	}

	.real-time-data {
		padding: 16px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.data-title {
		font-weight: bold;
		font-size: 16px;
		margin-bottom: 16px;
	}

	.data-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.data-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 16px;
		background-color: #f5f9ff;
		border-radius: 8px;
	}

	.data-label {
		color: #666;
		font-size: 14px;
		margin-bottom: 4px;
	}

	.data-value {
		font-weight: bold;
		font-size: 16px;
		color: #28a745;
	}

	.plant-info {
		padding: 16px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.info-title {
		font-weight: bold;
		font-size: 16px;
		margin-bottom: 16px;
	}

	.info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 16px;
		background-color: #f5f9ff;
		border-radius: 8px;
	}

	.info-label {
		color: #666;
		font-size: 14px;
		margin-bottom: 4px;
	}

	.info-value {
		font-weight: bold;
		font-size: 16px;
		color: #28a745;
	}

	.land {
		padding: 16px;
		background-color: #ffffff;
	}

	.land-service-title {
		font-weight: bold;
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.land-service-info {
		font-size: 14px;
		color: #999;
		cursor: pointer;
	}

	.land-service-cards {
		display: flex;
		gap: 16px;
		overflow-x: auto;
	}

	.service-card {
		width: 160px;
		border: 1px solid #e6e6e6;
		border-radius: 8px;
		padding: 16px;
		background-color: #f5f5f5;
		text-align: center;
		flex-shrink: 0;
		cursor: pointer;
		transition: all 0.3s;
	}

	.service-card.active {
		border-color: #28a745;
		background-color: #ffffff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.service-type {
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 8px;
		color: #333;
	}

	.service-price {
		font-size: 16px;
		color: #28a745;
		margin-bottom: 8px;
	}

	.service-description {
		font-size: 14px;
		color: #666;
	}

	.modal-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* 背景透明遮罩 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		/* 弹窗 z-index 层级，确保在最上层 */
	}

	.modal {
		background-color: #fff;
		border-radius: 8px;
		width: 80%;
		max-width: 500px;
	}

	.modal-header {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f5f5f5;
	}

	.modal-body {
		padding: 20px;
	}

	.options-container {
		margin-top: 15px;
		height: 200px;
		/* 设置高度，允许滚动 */
		overflow: hidden;
		/* 防止内容超出边界 */
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.option-item {
		padding: 10px;
		margin-bottom: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		cursor: pointer;
	}

	.option-item.selected {
		background-color: #007aff;
		color: white;
		border-color: #007aff;
	}

	.modal-footer {
		padding: 10px;
		display: flex;
		justify-content: space-evenly;
		/* 保证按钮均匀分布 */
		gap: 20px;
		/* 增加按钮间的间距 */
	}

	button {
		padding: 10px 20px;
		background-color: #7ebd00;
		color: white;
		border: none;
		border-radius: 5px;
		width: 40%;
		/* 增加按钮的宽度，确保按钮看起来更对齐 */
		text-align: center;
		/* 确保文字居中 */
		font-size: 16px;
		/* 调整文字大小以提高可读性 */
	}

	button:hover {
		background-color: #005bb5;
	}
</style>